<!--
* description: 文本输入框通用组件
* author: luojx
* createdDate: 2019-07-30
*  2019-08-09 修改文字溢出效果-封装/校验效果 liyanm
*  2019-08-15 增加输入框类型判断，默认text   yinxy
-->
<template>
  <el-col :span="span" v-if="showow">
    <lableName
      :style="setLabelNameWidth(span)"
      :validrule="validrule"
      :curLabelName="curLabelName"
      :isShowLabel="isShowLabel"
      :isRequire="isRequire"
    ></lableName>
    <el-input
      :style="setInputWidth(span)"
      :placeholder="readonly||disabled ? '' : '请输入'"
      v-model="modelCode"
      :disabled="disabled"
      :readonly="readonly"
      size="small"
      @clear="clearCodeInput"
      clearable
      resize="none"
      @blur="sendCode1"
      :type="inputType"
    ></el-input>
    <validateFormate :curLabelName="curLabelName" :validrule="validrule"></validateFormate>
  </el-col>
</template>
<script>
import { inputMixins } from "@/components/mixins/inputMixins";
export default {
  name: "crmTextInput",
  mixins: [inputMixins],
  components: {
    lableName: () => import("@/components/lableName"), //标题溢出样式组件
    validateFormate: () => import("@/components/validateFormate") //校验提示样式组件
  },
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showow: this.show
      // placeholder: this.readonly ? "" : "请输入",
      //suffixIcon: this.readonly ? "" : "el-icon-search"
    };
  },
  methods: {
    sendCode1() {
      let val = this.modelCode;
      let text = this.codeField;
      this.$emit("sendChangeCode", val, text);
      this.$emit("changeCode", val, text);
      this.$emit("changeblur", val);
      this.sendCode();
    },
    //表单模板里面点击输入框删除按钮，清除输入框的值
    clearCodeInput() {
      this.sendCode1();
    },
    setInputWidth(span) {
      span = parseInt(span);
      switch (span) {
        case 6:
          return "";
        case 12:
          return "width:85%;";
        case 16:
          return "width: calc(100% - 95px);";
        case 24:
          return "width: 92.5%;line-height: 38px; float: left;";
      }
    },
    setLabelNameWidth(span) {
      span = parseInt(span);
      switch (span) {
        case 6:
          return "";
        case 12:
          return "width:15%";
        case 16:
          return "width:90px";
        case 24:
          return "width:7.5%";
      }
    }
  }
};
</script>
